import React from "react";
import "../css/BordList.css";
import axios from "axios";

class BordList extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            dataList:[]
        }
    }

    getDate = ()=>{
        var temp = []
        axios.get("data.json").then(el=>{
            el.data.list.forEach(ele=>{
                temp.push(ele)
            })
            this.setState({
                dataList:temp,
            })
        })
    }

    componentWillMount(){
        this.getDate();
    }

    render(){
        return(
            <div className="list_container">
                <div className="list_wrapper">
                    {
                        this.state.dataList.map((el,index)=>{
                           return <div className="list_wrapper_item" key={index}>
                                    <div className="list_wrapper_item_left">
                                      <div className="list_wrapper_item_title" 
                                       onClick={()=>{
                                        this.props.history.push({
                                            pathname:"/BordDetail",
                                            query:{
                                                el
                                            }
                                        })
                                       }}>{el.title} </div>
                                      <div className="list_wrapper_item_content">{el.content}</div>
                                    </div>
                                    <div className="list_wrapper_item_right">
                                        <img src={el.img}/>
                                    </div>
                                  </div>
                        })
                    }
                </div>
            </div>
        )
    }

};

export default BordList;